"use client"

import { useState } from "react"
import { Search, Plus, Filter, Download, Upload, MoreHorizontal, Eye, Edit, Trash2 } from "lucide-react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

// 修改生成模拟学生数据的函数
const generateStudents = () => {
  const names = [
    "张明",
    "李华",
    "王芳",
    "刘强",
    "陈静",
    "杨光",
    "赵雪",
    "周鹏",
    "吴婷",
    "郑浩",
    "孙宇",
    "钱文",
    "朱琳",
    "胡杰",
    "何敏",
    "高峰",
    "林萍",
    "徐亮",
    "马燕",
    "谢刚",
    "韩梅",
    "冯伟",
    "董丽",
    "曹勇",
    "彭芳",
    "潘强",
    "蒋敏",
    "余亮",
    "魏静",
    "唐军",
  ]

  const classes = [
    "计算机科学1班",
    "计算机科学2班",
    "软件工程1班",
    "软件工程2班",
    "电子工程1班",
    "电子工程2班",
    "人工智能1班",
  ]

  return names.map((name, index) => {
    const id = index + 1
    const studentId = `2023${id.toString().padStart(6, "0")}`
    const classIndex = Math.floor(Math.random() * classes.length)
    const className = classes[classIndex]
    const gender = Math.random() > 0.5 ? "男" : "女"
    const attendance = Math.floor(Math.random() * 100)
    const attentionScore = Math.floor(Math.random() * 40) + 60
    const academicScore = Math.floor(Math.random() * 30) + 70

    return {
      id,
      studentId,
      name,
      gender,
      className,
      attendance: `${attendance}%`,
      attentionScore,
      academicScore,
      status: attendance > 90 ? "优秀" : attendance > 80 ? "良好" : "需改进",
      avatar: `/placeholder.svg?height=40&width=40&text=${name.charAt(0)}`,
    }
  })
}

const students = generateStudents()

export function StudentManagement() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedClass, setSelectedClass] = useState("all")

  // 过滤学生数据
  const filteredStudents = students.filter((student) => {
    const matchesSearch = student.name.includes(searchTerm) || student.studentId.includes(searchTerm)
    const matchesClass = selectedClass === "all" || student.className.includes(selectedClass)
    return matchesSearch && matchesClass
  })

  return (
    <Card>
      <CardHeader>
        <CardTitle>学生列表</CardTitle>
        <CardDescription>管理所有学生信息和学习数据</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="mb-4 flex flex-col gap-4 sm:flex-row">
          <div className="flex flex-1 items-center gap-2">
            <div className="relative flex-1">
              <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
              <Input
                type="search"
                placeholder="搜索学生姓名或学号..."
                className="pl-8"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
              />
            </div>
            <Select value={selectedClass} onValueChange={setSelectedClass}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="选择班级" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">所有班级</SelectItem>
                <SelectItem value="计算机科学">计算机科学</SelectItem>
                <SelectItem value="软件工程">软件工程</SelectItem>
                <SelectItem value="电子工程">电子工程</SelectItem>
                <SelectItem value="人工智能">人工智能</SelectItem>
              </SelectContent>
            </Select>
            <Button variant="outline" size="icon">
              <Filter className="h-4 w-4" />
              <span className="sr-only">筛选</span>
            </Button>
          </div>
          <div className="flex gap-2">
            <Button variant="outline" size="sm" className="gap-1">
              <Download className="h-4 w-4" />
              导出
            </Button>
            <Button variant="outline" size="sm" className="gap-1">
              <Upload className="h-4 w-4" />
              导入
            </Button>
            <Button size="sm" className="gap-1">
              <Plus className="h-4 w-4" />
              添加学生
            </Button>
          </div>
        </div>

        <div className="rounded-md border">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>学生信息</TableHead>
                <TableHead>班级</TableHead>
                <TableHead>出勤率</TableHead>
                <TableHead>注意力</TableHead>
                <TableHead>学习成绩</TableHead>
                <TableHead>状态</TableHead>
                <TableHead className="text-right">操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {filteredStudents.map((student) => (
                <TableRow key={student.id}>
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <Avatar>
                        <AvatarImage src={student.avatar} alt={student.name} />
                        <AvatarFallback>{student.name.charAt(0)}</AvatarFallback>
                      </Avatar>
                      <div>
                        <div className="font-medium">{student.name}</div>
                        <div className="text-xs text-muted-foreground">
                          {student.studentId} | {student.gender}
                        </div>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>{student.className}</TableCell>
                  <TableCell>{student.attendance}</TableCell>
                  <TableCell>
                    <div className="flex items-center gap-2">
                      <div
                        className={`h-2 w-2 rounded-full ${
                          student.attentionScore > 80
                            ? "bg-green-500"
                            : student.attentionScore > 70
                              ? "bg-yellow-500"
                              : "bg-red-500"
                        }`}
                      />
                      {student.attentionScore}%
                    </div>
                  </TableCell>
                  <TableCell>{student.academicScore}</TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        student.status === "优秀" ? "default" : student.status === "良好" ? "secondary" : "outline"
                      }
                    >
                      {student.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-right">
                    <DropdownMenu>
                      <DropdownMenuTrigger asChild>
                        <Button variant="ghost" size="icon">
                          <MoreHorizontal className="h-4 w-4" />
                          <span className="sr-only">操作菜单</span>
                        </Button>
                      </DropdownMenuTrigger>
                      <DropdownMenuContent align="end">
                        <DropdownMenuLabel>操作</DropdownMenuLabel>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem>
                          <Eye className="mr-2 h-4 w-4" />
                          查看详情
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                          <Edit className="mr-2 h-4 w-4" />
                          编辑信息
                        </DropdownMenuItem>
                        <DropdownMenuSeparator />
                        <DropdownMenuItem className="text-red-600">
                          <Trash2 className="mr-2 h-4 w-4" />
                          删除
                        </DropdownMenuItem>
                      </DropdownMenuContent>
                    </DropdownMenu>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  )
}
